<!--
 * @Descripttion: 
 * @version: 
 * @Author: zhangzhanhua
 * @Date: 2020-10-31 10:00:22
 * @LastEditors: zhangzhanhua
 * @LastEditTime: 2021-01-13 12:12:38
-->
<template>
<div id="mCharts" style="width:100%;">
    <div id="throughputCharts" style="width:100%;height:340px">
</div>
</div>

</template>

<script>
import echarts from "echarts";
export default {
    data() {
        return {
            throughputCharts:null
        }
    },
    watch: {
        options: {
            handler(newVal, oldVal) {
                this.draw();
            },
            deep: true //对象内部属性的监听，关键。
        },
    },
    props: {
        options: {},
    },
    
    methods: {
        draw() {
           setTimeout(()=>{
               console.log(window);
            // let fWidth = document.getElementById('mCharts').offsetWidth + 'px';
            let chartDom = document.getElementById('throughputCharts')
            // chartDom.style.width = fWidth
            this.throughputCharts = echarts.init(chartDom);
            this.throughputCharts.resize();
            // throughputCharts.clear();   
            this.throughputCharts.setOption(this.options);
            window.addEventListener("resize", ()=> {
                this.resizeFun()
            });
           },0)
        },
        resizeFun(){
            this.throughputCharts.resize();
        },
    },
    activated() {
        this.$nextTick(() => {
            this.draw();
        });
    },
    deactivated(){
         window.removeEventListener("resize",this.resizeFun);        
    }
}
</script>
